<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>编辑角色</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <link rel="stylesheet" href="__LIB__/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <div class="ok-form ibms-tree-form">
        <div class="ibms-tree-left">
            <ul id="roleTree" class="ztree ibms-tree-box"></ul>
        </div>
        <div class="ibms-tree-right">
            <form class="layui-form" lay-filter="filter">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">背景颜色</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="bgcolor" id="color-input" lay-verify="required" placeholder="请选择颜色" class="layui-input">
                    </div>
                    <div class="layui-inline ibms-btn-colorpicker">
                        <div id="color-picker"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" value="1" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                        <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script src="__LIB__/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script src="__LIB__/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="__LIB__/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script>
    layui.use(["colorpicker", "element", "form", "okLayer", "okUtils"], function () {
        let colorpicker = layui.colorpicker;
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let zTree = {};
        okLoading.close();

        // 表单赋值：parent.rowData为父页面传过来的行数据
        let initData = JSON.parse(JSON.stringify(parent.rowData));
        form.val("filter", initData);

        okUtils.ajax("{:url('getRoleNode')}?ids=" + initData.nodes).done(function (response) {
            // 初始化ztree
            let setting = {
                check: {
                    enable: true
                },
                callback: {
                    // 针对二级节点设置手风琴风格
                    beforeExpand: function (treeId, treeNode) {
                        if (0 !== treeNode.level) {
                            // 获取同一父节点下所同级别节点
                            // let treeNodes = zTree.getNodesByFilter(function (node) {
                            //     return (node.pid === treeNode.pid)
                            // });
                            // 获取所有同级别节点
                            let treeNodes = zTree.getNodesByParam('level', treeNode.level);
                            //关闭同级其他节点
                            for (var item of treeNodes) {
                                if (item.id !== treeNode.id) {
                                    zTree.expandNode(item, false, true, false, false);
                                }
                            }
                        }
                        return true;
                    }
                }
            };
            zTree = $.fn.zTree.init($('#roleTree'), setting, response.data);
        }).fail(function (error) {
            // console.log(error)
        });

        colorpicker.render({
            elem: '#color-picker',
            color: initData.bgcolor,
            done: function (color) {
                $('#color-input').val(color);
            }
        });

        function getTreeCheck() {
            let homeNode = zTree.getNodeByTId('roleTree_1');
            zTree.setChkDisabled(homeNode, false);
            let checkedNodes = zTree.getCheckedNodes(true);
            zTree.setChkDisabled(homeNode, true);
            let idsStr = '';
            for (let i = 0; i < checkedNodes.length; i++) {
                idsStr += checkedNodes[i].id + ',';
            }
            return idsStr;
        }

        form.on("submit(edit)", function (data) {
            data.field.id = initData.id;
            data.field.nodes = getTreeCheck();
            okUtils.ajax("{:url('edit')}", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                // console.log(error)
            });
            return false;
        });

        $(".cancle-btn").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
</body>
</html>
